<script setup>
import {message} from 'ant-design-vue';
import {ref} from 'vue';
import {communityInfoAdd, communityInfoUpdate, communityInfoOne} from '@/api/communityInfoApi.js';
import {CheckOutlined, CloseOutlined} from '@ant-design/icons-vue';


const open = ref(false);
const formRef = ref(null);
const emits = defineEmits(['saveSuccessful'])
import {loading} from '@/utils/loadingUtils.js';

const form = ref({
  communityName: '',
  address: '',
  totalBuildings: '',
  totalUnits: '',
  totalResidents: '',
  createTime: '',
})

const onOpen = (id) => {
  if (id) {
    handleUpdate(id)
  }
  open.value = true
}

const handleUpdate = (id) => {
  communityInfoOne(id).then(res => {
    form.value = res
    onOpen()
  })
}
const onClose = () => {
  open.value = false
  resetForm()
}


const resetForm = () => {
  formRef.value.resetFields();
  form.value.id = ''
};


const submit = () => {
  formRef.value.validate().then(async () => {
    if (form.value.id) {
      await communityInfoUpdate(form.value)
    } else {
      await communityInfoAdd(form.value)
    }
    message.success(form.value.id ? '更新成功' : '保存成功')
    emits('saveSuccessful')
    onClose()
  })
}

defineExpose({
  onOpen
})
</script>

<template>

  <a-modal @ok="submit" v-model:open="open" width="700px" @cancel="onClose" @close="onClose">
    <a-form :model="form" ref="formRef" layout="vertical">
      <a-form-item
          label="小区名称"
          name="communityName"
          :rules="[{ required: true, message: '请输入小区名称' }]"
      >
        <a-input
            placeholder="请输入小区名称"
            v-model:value="form.communityName"></a-input>
      </a-form-item>
      <a-form-item
          label="地址"
          name="address"
          :rules="[{ required: true, message: '请输入地址' }]"
      >
        <a-input
            placeholder="请输入地址"
            v-model:value="form.address"></a-input>
      </a-form-item>
      <a-form-item
          label="总楼栋数"
          name="totalBuildings"
          :rules="[{ required: true, message: '请输入总楼栋数' }]"
      >
        <a-input
            placeholder="请输入总楼栋数"
            v-model:value="form.totalBuildings"></a-input>
      </a-form-item>
      <a-form-item
          label="总单元数"
          name="totalUnits"
          :rules="[{ required: true, message: '请输入总单元数' }]"
      >
        <a-input
            placeholder="请输入总单元数"
            v-model:value="form.totalUnits"></a-input>
      </a-form-item>
      <a-form-item
          label="总居民数"
          name="totalResidents"
          :rules="[{ required: true, message: '请输入总居民数' }]"
      >
        <a-input
            placeholder="请输入总居民数"
            v-model:value="form.totalResidents"></a-input>
      </a-form-item>

    </a-form>
  </a-modal>

</template>

<style scoped>

</style>
